<template>
    <view class="container">
        <!-- 底部弹起协议面板 -->
        <view class="agreement-panel" :class="{ show: showCouponsPopup }">
            <view class="panel-header">
                <text class="panel-title">可使用优惠券</text>
            </view>

            <view class="panel-content">
                <scroll-view scroll-y="true" class="agreement-scroll">
                    <!-- 优惠券列表 -->
                    <view class="coupon-list">
                        <view v-if="tousedCoupons.length > 0" class="coupon-item un-used" v-for="(item, index) in tousedCoupons" :key="index">
                            <view class="coupon-left">
                                <view class="coupon-value"><text class="coupon-flats">￥</text>{{parseInt(item.amount)}}</view>
                                <view class="coupon-unit">优惠券</view>
                            </view>
                            <view class="coupon-right">
                                <view class="coupon-title">{{ item.title }}</view>
                                <view class="coupon-date">有效期：{{ item.days }}日</view>
                                <view class="coupon-footer">
                                    <view class="coupon-rules">
                                        <text>使用规则</text>
                                        <image v-if="!showRules[index]" class="gray-detail-icon"
                                            src="/static/personalCenter/gray-right.png" mode="aspectFill"></image>
                                        <image v-if="showRules[index]" class="gray-detail-icon"
                                            src="/static/personalCenter/gray-right.png" mode="aspectFill"
                                            style=" transform: rotate(-90deg); transform-origin: 70% 50%;"></image>
                                    </view>
                                    <view class="coupon-use-btn">
                                        <image v-if="!item.isChecked" class="check-icon"
                                            src="/static/personalCenter/auth-quan.png" mode="aspectFill"
                                             @click="handleIsChecked(item)"></image>
                                        <image v-if="item.isChecked" class="check-icon"
                                            src="/static/personalCenter/auth-gou.png" mode="aspectFill"
                                             @click="handleIsChecked(item)"></image>
                                    </view>
                                </view>

                            </view>
                        </view>
                        <empty-data v-if="tousedCoupons.length == 0" defaultText="暂无数据"/>
                        <view v-if="false" class="rules-details-warps">
                            <view class="rules-shape">
                                <text class="rules-shape-item"></text>
                                <text class="rules-shape-item"></text>
                            </view>
                            <view class="rules-content">
                                <view class="rules-content-warps">
                                    <view class="rule-title">使用规则：</view>
                                    <view class="rule-item">1、优惠券可降低产品的价格，是一种常见的消费者营业推广工具。</view>
                                    <view class="rule-item">2、优惠券可以印在杂志的插页上</view>
                                    <view class="rule-item">3、或夹在报纸中随附送</view>
                                </view>
                            </view>
                        </view>

                    </view>
                </scroll-view>
            </view>
        </view>

        <!-- 遮罩层 -->
        <view class="mask" :class="{ show: showCouponsPopup }" @click="confirmAgreement"></view>
    </view>
</template>

<script>
export default {
    props: {
        showCouponsPopup: {
            type: Boolean,
            default: false
        },
        lineId: {
            type: String,
            default: ''
        }
    },
    watch: {
        showCouponsPopup(val) {
            if (val) {
                this.getCouponsList();
            }
        },
    },
    data() {
        return {
            isChecked: false,
            tousedCoupons: [], // 未使用优惠券数据
            showRules: {}, // 控制规则显示
            isShowRules: false,
            currentCitem: null
        }
    },
    methods: {
        handleIsChecked(item){
            this.tousedCoupons.forEach(item=>{
                item.isChecked = false
            });
            item.isChecked = !item.isChecked
            this.currentCitem = item.isChecked ? item : null
        },
        async getCouponsList() {
            try {
                const data = await this.$http.get("/h5/line/getCoupon?line_id=" + this.lineId);
                this.tousedCoupons = []
                 data.data && data.data.forEach(item=>{
                    let data = {
                        ...item,
                        isChecked: false
                    }
                    this.tousedCoupons.push(data)
                });
            } catch (error) { }
        },
        toggleRules(index) {
            this.$set(this.showRules, index, !this.showRules[index]);
            this.isShowRules = !this.isShowRules;
        },
        confirmAgreement() {
            this.$emit('update:visible', false, this.currentCitem)
            

        }
    }
}
</script>

<style>
/* 优惠券面板样式 */
.agreement-panel {
    position: fixed;
    bottom: -100%;
    left: 0;
    right: 0;
    background-color: #F5F5F6;
    border-radius: 50rpx 50rpx 0 0;
    transition: all 0.3s ease;
    z-index: 100;
    max-height: 70vh;
}

.agreement-panel.show {
    bottom: 0;
}

.panel-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40rpx 0 52rpx 0;
}

.panel-title {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 32rpx;
    color: #0B1F20;
    line-height: 48rpx;
}

.close-btn {
    /* font-size: 48rpx;
  color: #999; */
}

.panel-content {
    padding: 0 26rpx 84rpx 26rpx;
}

.agreement-scroll {
    max-height: 50vh;

}

.agreement-text {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 30rpx;
    color: #666666;
    line-height: 54rpx;
    letter-spacing: 1px;
}


/* 遮罩层样式 */
.mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 99;
}

.mask.show {
    opacity: 1;
    pointer-events: auto;
}

/* 优惠券列表样式 */
.coupon-list {}

.coupon-item {
    width: 100%;
    display: flex;
    margin-bottom: 20rpx;
    overflow: hidden;
    position: relative;

}

.coupon-left {
    width: 240rpx;
    text-align: center;
    padding-top: 38rpx;
}

.coupon-item.un-used {
    background-image: url("~@/static/personalCenter/coupon-1.png");
    background-size: 100% 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;

}

.coupon-item.used {
    background-image: url("~@/static/personalCenter/coupon-2.png");
    background-size: 100% 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.coupon-item.expired {
    background-image: url("~@/static/personalCenter/coupon-2.png");
    background-size: 100% 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.coupon-value {
    font-family: DIN Pro, DIN Pro;
    font-weight: 700;
    font-size: 96rpx;
    color: #FFFFFF;
    line-height: 42rpx;
    padding-top: 38rpx;
    padding-bottom: 12rpx;
}

.coupon-flats {
    font-size: 32rpx;
}

.coupon-unit {
    font-family: Source Han Sans, Source Han Sans;
    font-size: 28rpx;
    color: #FFFFFF;
    line-height: 40rpx;
}

.coupon-right {
    flex: 1;
    padding: 26rpx 20rpx 22rpx 44rpx;
}

.coupon-title {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 700;
    font-size: 34rpx;
    color: #0B1F20;
    line-height: 52rpx;
    letter-spacing: 1px;
    margin-bottom: 10rpx;
}

.coupon-date {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 24rpx;
    color: #999999;
    line-height: 36rpx;
    margin-bottom: 20rpx;
}

.coupon-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.coupon-rules {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 24rpx;
    color: #697592;
    line-height: 36rpx;
    display: flex;
    align-items: center;
}

.gray-detail-icon {
    width: 28rpx;
    height: 28rpx;
}

.coupon-use-btn image {
    width: 40rpx;
    height: 40rpx;
}


.rules-content {
    padding: 8rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
    /* position: absolute;
  left: 0rpx;
  bottom: 0; */
}

.rules-content-warps {
    border-radius: 16rpx;
    border: 2rpx dashed #FF7937;
    padding: 20rpx 0 20rpx 20rpx;
}

.rule-title {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 28rpx;
    color: #0B1F20;
    line-height: 42rpx;
    padding-bottom: 12rpx;
}

.rule-item {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 26rpx;
    color: #697592;
    line-height: 40rpx;
}


.rules-shape {
    display: flex;
    justify-content: space-between;
    padding: 0 40rpx;
}

.rules-shape-item {
    width: 12rpx;
    height: 20rpx;
    background: #FF7937;
    display: block;

}
</style>